<route lang="jsonc">{
  "layout": "tabbar",
  "style": {
    "navigationBarTitleText": "管理"
  }
}</route>

<script lang="ts" setup>
import OperationContent from './OperationContent.vue'
import reimburseList from './reimburseList.vue'

defineOptions({
  name: 'Operation',
})
// 组件引用
const OperationContentRef = ref()
const reimburseListRef = ref()
// 控制组件显示的条件
const roleId = ref(null)
// 根据角色调用相应组件的activated方法
function callComponentActivated() {
  console.log(roleId.value, 'roleId.value');

  if (roleId.value == 100) {
    // 调用HomeContent组件的activated方法
    OperationContentRef.value?.actived()
  }
  else {
    // 调用investor组件的activated方法
    console.log('借贷人管理页面激活', '........................')
    reimburseListRef.value?.actived()
  }
}
onShow(() => {
  if (uni.getStorageSync('user')) {
    roleId.value = JSON.parse(uni.getStorageSync('user')).userInfo.role
    // 页面显示时根据角色调用相应组件的activated方法
    nextTick(() => {
      console.log('管理页面激活')
      callComponentActivated()
    })
  }
})
</script>

<template>
  <view>
    <!-- 使用v-show替代v-if，确保组件始终被渲染 -->
    <OperationContent v-show="roleId == 100" ref="OperationContentRef" />
    <reimburseList v-show="roleId != 100" ref="reimburseListRef" />
    <!-- tabbar占位高度 -->
    <view class="tabbar-placeholder" />
  </view>
</template>

<style>
page {
  background-color: #f6f6f6;
}
</style>

<style scoped lang="scss">
// tabbar占位高度
.tabbar-placeholder {
  height: 100rpx;
  width: 100%;
}
</style>
